html { height: 100%; }

#body
{
    background-image: linear-gradient(to bottom, #000000, #202020 100%);
    background-repeat: repeat-x;
    background-size: cover;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

.container
{
    position: absolute;
    bottom: 0px;
    transform-origin: bottom center;
}

.fire-container
{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transform-origin: center;
}

.up-path
{
    width: 1%;
    position: absolute;
    bottom: 0px;
    left: 49.5%;
}

.up-item
{
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0px;
    border: 0px;
    border-bottom-right-radius: 60%;
    border-bottom-left-radius: 60%;
    opacity: 1;
}

.fire-path
{
    height: 1%;
    position: absolute;
    top: 49.5%;
    left: 50%;
    transform-origin: left center;
    overflow: hidden;
}

.fire-path0 { transform: rotate(0deg); width: 100%; }
.fire-path1 { transform: rotate(24deg); width: 66.6%; }
.fire-path2 { transform: rotate(48deg); width: 83.2%; }
.fire-path3 { transform: rotate(72deg); width: 100%; }
.fire-path4 { transform: rotate(96deg); width: 50%; }
.fire-path5 { transform: rotate(120deg); width: 73.2%; }
.fire-path6 { transform: rotate(144deg); width: 63.2%; }
.fire-path7 { transform: rotate(168deg); width: 93.2%; }
.fire-path8 { transform: rotate(192deg); width: 100%; }
.fire-path9 { transform: rotate(216deg); width: 66.6%; }
.fire-path10 { transform: rotate(240deg); width: 86.6%; }
.fire-path11 { transform: rotate(264deg); width: 53.2%; }
.fire-path12 { transform: rotate(288deg); width: 100%; }
.fire-path13 { transform: rotate(312deg); width: 73.3%; }
.fire-path14 { transform: rotate(336deg); width: 83.2%; }

.fire-item
{
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 100%;
    border: 0px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    opacity: 1;
}